<template>
    <div>
        <RadioGroup v-model="flag">
            <Radio :label="0">restful关联</Radio>
            <Radio :label="1" style="margin-left: 26px">高级关联</Radio>
        </RadioGroup>
        <div class="restful-relation">
            <div class="restful-item add" @click="addRestFulRel">
                <div class="add-restful">
                    <div>
                        <Icon type="ios-plus-empty" size="26"></Icon>
                    </div>
                    <div>新增</div>
                </div>
            </div>
            <div style="width: calc(100% - 216px); overflow-x: auto;">
                <div style="width: max-content">
                    <div v-if="tableRelations.length > 0 && flag === 0" v-for="(item, index) in tableRelations" class="restful-item">
                        <div>
                            {{item.slaveTableName}}
                        </div>
                        <div>
                            <p>关系</p>
                            {{item.relation}}
                        </div>
                        <div>
                            <p>关联字段</p>
                            {{item.masterColumnName}}={{item.slaveColumnName}}
                        </div>
                        <div class="rel-delete">
                            <Icon type="close-round" @click="delRelation(item.id, index)"></Icon>
                        </div>
                    </div>
                    <div v-if="seniorRelationList.length > 0 && flag === 1" v-for="(item, index) in seniorRelationList" class="restful-item">
                        <div></div>
                        <div v-html="item.sql"></div>
                        <div class="rel-delete">
                            <Icon type="close-round" @click="seniorDelete(item.id, index)"></Icon>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <Modal v-model="relModel"
               title="Restful关联表"
               @on-ok="relationOk">
            <Form :model="addRelation" label-position="right" :label-width="80" ref="relationForm">
                <FormItem label="当前表：">
                    {{row.name}}
                </FormItem>
                <FormItem label="关系：" prop="relation">
                    <RadioGroup v-model="addRelation.relation">
                        <Radio label="One to One" value="one_to_one"></Radio>
                        <Radio label="One to Many" value="one_to_many"></Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="关联表：" prop="slaveTableId">
                    <Select v-model="addRelation.slaveTableId" placeholder="请选择" @on-change="relTableChange">
                        <Option v-for="(item, index) in tableList" :key="item.id" :label="item.name" :value="item.id"></Option>
                    </Select>
                </FormItem>
                <Row>
                    <Col span="12">
                        <FormItem label="关联字段：" prop="masterColumnIndex">
                            <Select v-model="addRelation.masterColumnIndex" placeholder="主表字段"  @on-change="masterChange">
                                <Option v-for="(item, index) in masterColumns" :key="index" :label="item.name" :value="index"></Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem prop="slaveColumnIndex">
                            <span slot="label" style="text-align: center; display: inline-block;width: 100%">=</span>
                            <Select v-model="addRelation.slaveColumnIndex"  placeholder="子表表字段" @on-change="slaveChange">
                                <Option v-for="(item, index) in slaveColumns" :key="index" :label="item.name" :value="index"></Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </Modal>

        <Modal v-model="seniorModel"
               title="高级关联表"
               @on-ok="seniorRelationOk" width="700">
            <div>select * from {{row.name}}<Button @click="addTableRelation">新增关联表</Button></div>
            <div v-for="(ite, i) in seniorRelation.relationTables" style="margin-top: 20px">
                <div style="display: flex;justify-content: space-between">
                    <div>
                        <Select v-model="ite.relation" style="width: 150px">
                            <Option label="left join" value="left join"></Option>
                            <Option label="inner join" value="inner join"></Option>
                        </Select>
                        <Select v-model="ite.slaveTableId" placeholder="关联表" @on-change="seniorRelTableChange($event, i)" style="width: 150px">
                            <Option v-for="item in tableList" :key="item.id" :label="item.name" :value="item.id"></Option>
                        </Select>
                    </div>
                    <div>
                        <Button v-if="i != 0" @click="deleteSenior(seniorRelation.relationTables, i)" icon="trash-a" shape="circle"></Button>
                        <Button @click="addColumnRelation(i)" icon="plus" shape="circle"></Button>
                    </div>
                </div>
                <div v-for="(column, index) in ite.relationColumns" :key="index" style="margin-top: 8px;padding-left: 16px">
                    <div style="display: flex;justify-content: space-between">
                        <div>
                            <span>on {{row.name}}.</span>
                            <Select v-model="column.masterColumnName" placeholder="主表字段" style="width: 150px" @on-change="seniorMasterColumnChange($event, column)">
                                <Option v-for="(item, index) in masterColumns" :key="index" :label="item.name" :value="item.name"></Option>
                            </Select>
                            {{column.operate}} {{ite.slaveTableName?ite.slaveTableName+'.':''}}
                            <Select v-model="column.slaveColumnName"  placeholder="子表表字段" style="width: 150px" @on-change="seniorSlaveColumnChange($event, column, ite.slaveColumns)">
                                <Option v-for="(item, index) in ite.slaveColumns" :key="index" :label="item.name" :value="item.name"></Option>
                            </Select>
                        </div>
                        <Button v-if="index != 0" @click="deleteSenior(ite.relationColumns, index)" icon="trash-a" shape="circle"></Button>
                    </div>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                flag: 0,
                tableRelations:[],
                relModel: false,
                masterColumns:[],
                slaveColumns:[],
                addRelation: {
                    masterTableId: this.row.id,
                    slaveTableId: '',
                    relation: '',
                    masterColumnName: '',
                    slaveColumnName: '',
                    masterColumnType: '',
                    slaveColumnType: '',
                    masterColumnIndex: '',
                    slaveColumnIndex: ''
                },
                seniorModel: false,
                seniorRelationList:[],
                seniorRelation: {
                    relationTables:[]
                }
            };
        },
        props:{
            row: Object,
            tableList: Array
        },
        created(){
            this.$http.get('/codegen/api/v1/tables/'+ this.row.id + '/relations').then((response)=>{
                this.tableRelations = response.data.tableRelations;
            });
            this.$http.get('/codegen/api/v1/tables/'+ this.row.id + '/seniorRelations').then((response)=>{
                this.seniorRelationList = response.data.seniorRelationList;
            });
            this.$http.get('/codegen/api/v1/tables/'+this.row.id+'/columns').then((response)=>{
                this.masterColumns = response.data.columns;
            });
        },
        methods:{
            addRestFulRel(){
                if (this.flag) {
                    this.seniorRelation = {
                        masterTableId : this.row.id,
                        masterTableName : this.row.name,
                        relationTables : [
                            {
                                relation: 'left join',
                                slaveTableId: '',
                                slaveTableName: '',
                                slaveColumns:[],
                                relationColumns: [
                                    {
                                        masterTableName:'',
                                        slaveTableName:'',
                                        masterColumnName:'',
                                        slaveColumnName:'',
                                        masterColumnType:'',
                                        slaveColumnType:'',
                                        operate: '='
                                    }
                                ]
                            }
                        ]
                    };
                    this.seniorModel = true;
                }else {
                    this.$refs['relationForm'].resetFields();
                    this.relModel = true;
                }
            },
            //新增关联
            relationOk(){
                this.$http.put('/codegen/api/v1/tables/relations/save', this.addRelation).then((response)=>{
                    if (response.data.statusCode == '200') {
                        this.tableRelations.push(response.data.tableRelation);
                    }
                });
            },
            //masterChange
            masterChange(index){
                this.addRelation.masterColumnName = this.masterColumns[index].name;
                this.addRelation.masterColumnType = this.masterColumns[index].javaType;
            },
            //slaveChange
            slaveChange(index){
                this.addRelation.slaveColumnName = this.slaveColumns[index].name;
                this.addRelation.slaveColumnType = this.slaveColumns[index].javaType;
            },
            relTableChange(id){
                this.$http.get('/codegen/api/v1/tables/'+id+'/columns').then((response)=>{
                    this.slaveColumns = response.data.columns;
                });
            },
            delRelation(id, index){
                this.$Modal.confirm({
                    title: '确认',
                    content: '确定删除该restful关系吗？',
                    okText: '确定',
                    cancelText: '取消',
                    onOk: ()=>{
                        this.$http.delete('/codegen/api/v1/tables/relations/'+id+'/delete').then(()=>{
                            this.tableRelations.splice(index, 1);
                        });
                    }
                });
            },
            //保存高级关联
            seniorRelationOk(){
                this.$http.put('/codegen/api/v1/tables/seniorRelations/save', this.seniorRelation).then((response)=>{
                    if (response.data.statusCode == '200') {
                        this.$http.get('/codegen/api/v1/tables/'+ this.row.id + '/seniorRelations').then((response)=>{
                            this.seniorRelationList = response.data.seniorRelationList;
                        });
                    }
                });
            },
            //高级关联新增表关联
            addTableRelation(){
                this.seniorRelation.relationTables.push(
                    {
                        relation: 'left join',
                        slaveTableId: '',
                        slaveTableName: '',
                        slaveColumns:[],
                        relationColumns: [
                            {
                                masterTableName:'',
                                slaveTableName:'',
                                masterColumnName:'',
                                slaveColumnName:'',
                                masterColumnType:'',
                                slaveColumnType:'',
                                operate: '='
                            }
                        ]
                    }
                );
            },
            addColumnRelation(i){
                this.seniorRelation.relationTables[i].relationColumns.push(
                    {
                        masterTableName:'',
                        slaveTableName:'',
                        masterColumnName:'',
                        slaveColumnName:'',
                        masterColumnType:'',
                        slaveColumnType:'',
                        operate: '='
                    }
                );
            },
            //高级关联 从表变更
            seniorRelTableChange(id, index){
                if (id) {
                    let dbTable = this.tableList.find((db)=>{
                        return db.id === id;
                    });
                    this.seniorRelation.relationTables[index].slaveTableName = dbTable.name;
                    this.$http.get('/codegen/api/v1/tables/'+dbTable.id+'/columns').then((response)=>{
                        this.seniorRelation.relationTables[index].slaveColumns = response.data.columns;
                    });
                }
            },
            //删除高级关联中的字段或者表
            deleteSenior(columns, index){
                columns.splice(index, 1);
            },
            //高级 主表字段变化
            seniorMasterColumnChange(masterColumnName, column){
                let mcolumn = this.masterColumns.find((db)=>{
                    return db.name == masterColumnName;
                });
                if (mcolumn)
                    column.masterColumnType = mcolumn.javaType;
            },
            //高级 从表字段变化
            seniorSlaveColumnChange(slaveColumnName, column, list){
                let scolumn = list.find((db)=>{
                    return db.name == slaveColumnName;
                });
                if (scolumn)
                    column.slaveColumnType = scolumn.javaType;
            },
            //删除高级关联
            seniorDelete(id, index){
                this.$http.delete('/codegen/api/v1/tables/seniorRelations/'+id+'/delete').then(()=>{
                    this.seniorRelationList.splice(index, 1);
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    .restful-relation{
        display: flex;
        align-items: center;

        .restful-item{
            padding: 8px 26px 0 16px;
            margin: 16px 16px 0 0;
            background:linear-gradient(to right, #6488fd,#79c4fe);
            width: 220px;
            height: 135px;
            border-radius: 4px;
            display: inline-block;
            box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
            position: relative;

            &.add{
                background: transparent;
                border: 1px dashed #dcdee2;
                box-shadow: none;
                cursor: pointer;
            }

            &>div{
                &:first-child{
                    color: #fffa7f;
                    font-size: 16px;
                    font-weight: 600;
                }
                &.add-restful{
                    font-size: 14px;
                    color: #c5c5c5;
                    text-align: center;
                    font-weight: normal;
                    i{
                        font-weight: 800;
                    }
                    padding-top: 32px;
                }
                &.rel-delete{
                    position: absolute;
                    right: 8px;
                    top: 8px;
                    cursor: pointer;
                }

                margin-bottom: 8px;
                font-size: 14px;
                color: #fff;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
                p{
                    color: #a3c1ff;
                    font-size: 12px;
                }
            }
        }
    }
</style>